<template>
    <view class="pg-center">
        <view class="w-750">
            <wd-search disabled hide-cancel />
        </view>
        <view class="cont mb-safe">
            <view class="w-700 h-auto fl-ro-cen ju-bet flex-wrap">
                <mall-goods-item v-for="item in 10" :itemObj="storeGoodsItemObj"></mall-goods-item>
            </view>
        </view>
        <wd-tabbar v-model="tabbar" @change="tab_change" active-color="#0055ff" inactive-color="#7d7e80" fixed bordered safeAreaInsetBottom placeholder>
            <wd-tabbar-item name="index" title="首页" icon="home"></wd-tabbar-item>
            <!-- <wd-tabbar-item name="fine-mall" title="商城" icon="goods"></wd-tabbar-item> -->
            <wd-tabbar-item name="user" title="我的" icon="user"></wd-tabbar-item>
        </wd-tabbar>
    </view>
</template>

<script setup>
    import { ref } from 'vue';
    import { onShow, onLoad } from '@dcloudio/uni-app';

    //标签的索引值
    const tabbar = ref('');

    const storeGoodsItemObj = ref({
        id: 0,
        src: '../../static/image/清风纸巾.jpg',
        name: '清风纸巾一包',
        price: 1.0
    });

    //点击tabbar
    const tab_change = ({ value }) => {
        uni.switchTab({
            url: `/pages/custom/${value}/${value}`
        });
    };

    onShow(() => {
        //由于wd-tabbar的bug，进入页面立马手动更新tabbar，实现图标换色
        tabbar.value = 'fine-mall';
        console.log(`进入了${tabbar.value}页`);
    });
</script>

<style lang="scss" scoped></style>
